import { CheckCircleIcon } from '@heroicons/react/20/solid';

const tiers = [
  {
    name: '星海建站理念',
    id: 'tier-growth',
    description: '安全高效，简洁易用',
    features: ['网络安全第一位', '前后端尽量隔离', 'Keep It Simple', 'Keep It Stupid'],
  },
  {
    name: '后端技术栈',
    id: 'tier-basic',
    description: '自带电池的后端框架',
    features: [
      'Django Web Framework',
      'PostgreSQL Relational Database',
      'Ninja REST Framework',
      'JSON Web Token (JWT)',
    ],
  },
  {
    name: '前端技术栈',
    id: 'tier-essential',
    description: '健壮灵活可定制的前端框架',
    features: ['React Javascript', 'React Router', 'Ant Design ProComponents', 'Tailwind CSS'],
  },
];

export default function Home() {
  return (
    <div className="mx-auto max-w-7xl px-6 lg:px-8">

      <div className="mx-auto max-w-4xl sm:text-center">
        <p className="mt-2 text-5xl font-semibold tracking-tight text-pretty text-indigo-600 sm:text-6xl sm:text-balance">
          Web 开发&nbsp;&nbsp; By &nbsp;星海
        </p>
      </div>
      <div className="mt-12 flow-root">
        <div className="isolate -mt-16 grid max-w-sm grid-cols-1 gap-y-16 divide-y divide-gray-100 sm:mx-auto lg:-mx-8 lg:mt-0 lg:max-w-none lg:grid-cols-3 lg:divide-x lg:divide-y-0 xl:-mx-4">
          {tiers.map((tier) => (
            <div key={tier.id} className="pt-8 lg:px-4 lg:pt-0 xl:px-14">
              <h3 id={tier.id} className="text-xl/loose font-semibold text-gray-900">
                {tier.name}
              </h3>
              <p className="text-md/6 mt-2 font-semibold text-gray-600">{tier.description}</p>
              <ul role="list" className="text-md/6 mt-6 space-y-3 text-gray-600">
                {tier.features.map((feature) => (
                  <li key={feature} className="flex gap-x-3">
                    <CheckCircleIcon
                      aria-hidden="true"
                      className="h-6 w-5 flex-none text-indigo-600"
                    />
                    {feature}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>

      <p className="mx-auto mt-16 max-w-2xl text-lg leading-loose font-medium text-pretty text-gray-600 sm:text-center sm:text-xl/8">
        本后台管理面板是我学习网站开发的阶段性成果展示
        <br />
        如有意向寻求网站建设或交流，请与我联系
        <br />
        25931014@qq.com
        <br />
      </p>
    </div>
  );
}
